<template>
    <div class="quyu">
        <section class="content-header">
            统计分析&nbsp;/&nbsp;区域用水情况统计
        </section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-sm-4 clearfix">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker1" placeholder="YYYY-MM-DD" v-model="timeData.timeStart">
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:34px;line-height:34px">--
                            <!-- <span style="display:inline-block;height:34px;line-height:34px"></span> -->
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker2" placeholder="YYYY-MM-DD" v-model="timeData.timeEnd">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 clearfix">
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-primary" @click="select()">查询</button>
                        </div>
                        <div class="col-sm-2 col-sm-offset-7">
                            <button type="button" class="btn btn-primary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clearfix chartBox">
            <div ref="echartContainer" style="width:100%; height:500px"></div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timeData: {
                timeStart: utils.nowDate(-7),
                timeEnd: utils.nowDate(0),
            },
            list: {},
        }
    },
    mounted() {
        this.selectDate1()
        this.selectDate2()
        this.select()
    },
    methods: {
        //日期选择
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.timeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.timeData.timeEnd = ev.target.value;
                });
        },
        getList(callback) {
            this.$api.tongji.hyChat(this.timeData).then(res => {
                if (res.success) {
                    this.list = res.data
                    callback()
                }
            });
        },
        //echart图标
        select() {
            let myChart = echarts.init(this.$refs.echartContainer);
            this.getList(() => {
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['总用水量m³', '总排水量m³']
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 50,
                    x2: 50,
                    y2: 100 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.list.hyNames,
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value.split("").join("\n");
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '总用水量m³',
                        type: 'bar',
                        data: this.list.hyYs,
                        itemStyle: {
                            normal: {
                                color: '#5b9bd5',
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '总排水量m³',
                        type: 'bar',
                        data: this.list.hyPs,
                        itemStyle: {
                            normal: {
                                color: '#ed7d31',
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                    }
                                }
                            }
                        }
                    }
                ]
            });
            });
        }
    }
}
</script>

<style>
</style>
